<!-- 报名成员 -->
<template>
	<view class="content timetable-detail"  :style="{height:scrollheight+'px'}">
        <uni-nav-bar fixed status-bar title="报名详情">
			<view slot="left" :style="{top: height}">
				<xjx-back :homeShow="true" :color="'black'"></xjx-back>
			</view>
		</uni-nav-bar>
	
		<view class="course-member item-box">
			<view class="member_head">
				<view class="label">
					{{'报名成员'}}
				</view>
				<view><text class="col_y">{{appointList.length}}</text><text class="col_666">人</text></view>
			</view>
			<view v-if="appointList.length>0" class="member-list">
				<view v-for="(item, index) in appointList" :key="index" class="member-item">
					<view class="headimg">
						<image v-if="item.playerIcon" :src="(item.playerIcon.indexOf('player-icon-boy') > -1 || item.playerIcon.indexOf('player-icon-gril') > -1) ? item.userIcon : item.playerIcon" mode=""></image>
            <templat v-else>
						  <!-- <image v-if="item.sex == '1'" :src="'@/static/images/mine/player-icon-boy-grey.png' |addBaseImgUrl" mode=""></image>
						  <image v-else :src="'@/static/images/mine/player-icon-gril-grey.png' |addBaseImgUrl" mode=""></image> -->
						  <image :src="item.userIcon" mode=""></image>
            </templat>
						<view v-if="item.sex=='1'" class="icon m"></view>
						<view v-if="item.sex=='2'" class="icon w"></view>
					</view>
					<view class="member-name">
						{{item.relName}}
					</view>
					<view v-if="item.sex=='1'" class="jibieM">
						<view :class="item.sex=='1'?'jlbicon jlbm':'jlbicon jlbw'"></view>
						级别L{{item.playerSkillLevel||'0'}}
					</view>
					<view v-if="item.sex=='2'" class="jibieW">
						<view :class="item.sex=='1'?'jlbicon jlbm':'jlbicon jlbw'"></view>
						级别L{{item.playerSkillLevel||'0'}}
					</view>
				</view>
			</view>
			<xjx-nodata marginTop="50px" v-else></xjx-nodata>
		</view>
		<view v-if="houbuList.length>0" class="course-member item-box">
			<view class="member_head">
				<view class="label">
					{{'候补成员'}}
				</view>
				<view><text class="col_y">{{houbuList.length}}</text><text class="col_666">人</text></view>
			</view>
			<view  class="member-list">
				<view v-for="(item, index) in houbuList" :key="index" class="member-item">
					<view class="headimg">
            <image v-if="item.playerIcon" :src="(item.playerIcon.indexOf('player-icon-boy') > -1 || item.playerIcon.indexOf('player-icon-gril') > -1) ? item.userIcon : item.playerIcon" mode=""></image>
            <templat v-else>
						  <image :src="item.userIcon" mode=""></image>
            </templat>
						<view v-if="item.sex=='1'" class="icon m"></view>
						<view v-if="item.sex=='2'" class="icon w"></view>
					</view>
					<view class="member-name">
						{{item.relName}}
					</view>
					<view v-if="item.sex=='1'" class="jibieM">
						<view :class="item.sex=='1'?'jlbicon jlbm':'jlbicon jlbw'"></view>
						级别L{{item.playerSkillLevel||'0'}}
					</view>
					<view v-if="item.sex=='2'" class="jibieW">
						<view :class="item.sex=='1'?'jlbicon jlbm':'jlbicon jlbw'"></view>
						级别L{{item.playerSkillLevel||'0'}}
					</view>
				</view>
			</view>
		</view>
		<!-- <button open-type="share" class="share-btn">
			分享
		</button> -->
	</view>
</template>

<script>
	import { mapState, mapGetters, mapMutations } from 'vuex'
	export default {
		data() {
			return {
				hourRangeIndex: 0,
				classSlotId: '',
				appointList: [],
				houbuList:[],
				detailId:'',
				scrollheight:'',
			};
		},
		onLoad(data) {
			this.scrollheight=uni.getSystemInfoSync().windowHeight;//获取可使用的窗口高度
			this.detailId = data.id;
			this.queryActEnterListToUser();
		},
		onShow() {},
		computed:{
			...mapState(['userInfo','accessToken','courseTimeDetail'])
		},
		methods:{
			async queryActEnterListToUser(){
				const param = {
					'ACCESS-TOKEN': this.accessToken,
                    pageNo:'1',
                    pageSize:'99999',
                    status:'0',
                    actId:this.detailId
				}
				const res = await this.$api.queryActEnterListToUser(param)
				if(res&&res.code==200){
					this.appointList = res.data.list
					let dataList = res.data.list;
					let bmList = [];
					let hbList = [];
					dataList.forEach((item,ind)=>{
						if(item.isBack== '0'){
							bmList.push(item)
						}else{
							hbList.push(item)
						}
					})
					this.appointList = bmList;
					this.houbuList = hbList;
				}
			},
			gotoDetail(id,qyId){
				//去会员详情
				uni.navigateTo({
					url:`/mainProcess/club/vipMember/detail/detail?id=${id}&qyId=${qyId}`
				})
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.timetable-detail{
		background-color:#f4f4f4;
		.course-detail{
			padding: 40rpx 0 10rpx;
			.course-info{
				flex-flow: row nowrap;
				justify-content: space-between;
				padding-left: 30rpx;
				align-items: top;
				.left{
					width: 190rpx;
					height: 190rpx;
					border-radius: 15rpx;
					overflow: hidden;
					background-color: #F2F2F2;
					image{
						width: 100%;
						height: 100%;
						vertical-align: middle;
					}
				}
				.right{
					margin-left: 10rpx;
					height: 220rpx;
					padding: 0 30rpx 30rpx 10rpx;
					border-bottom: 1rpx solid #E9E9E9;
					// width: 520rpx;
					flex: 1 0 auto;
					box-sizing: border-box;
					display: flex;
					flex-flow: column;
					justify-content: space-between;
					.right-top{
						display: flex;
						justify-content: space-between;
						align-items: flex-start;
						.title{
							font-size: 34rpx;
							color: $text-color;
							// font-weight: 600;
							line-height: 42rpx;
							width: 310rpx;
						}
						.venue{
							align-items: center;
							line-height: 42rpx;
							.venue-name{
								color: #CCCCCC;
								flex: 0 0 auto;
								font-size: 24rpx;
								max-width: 120rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}
					}
					.right-bottom{
						justify-content: flex-start;
						
						.course-tag{
							color: #F77350;
							background-color: #FDE3DC;
							padding: 0 10rpx;
							font-size: 24rpx;
							border-radius: 5rpx;
						}
					}
				}
			}
			&+.course-item{
				border-top: 15rpx solid #F2F2F2;
			}
			.times-list{
				height: 128rpx;
				flex-flow: row nowrap;
				justify-content: flex-start;
				align-items: center;
				padding: 0 30rpx;
				overflow-x: scroll;
				.times-item{
					flex: 0 0 auto;
					width: 180rpx;
					height: 68rpx;
					border-radius: 34rpx;
					border: $public-border;
					line-height: 64rpx;
					box-sizing: border-box;
					text-align: center;
					color: $public-color-blue1;
					font-size: 24rpx;
					&+.times-item{
						margin-left: 20rpx;
					}
					&.checked{
						color: #FFFFFF;
						background-color: $public-color-blue1;
					}
				}
			}
		}
		.course-member{
			padding: 0 20rpx;
			border-top: 15rpx solid #F2F2F2;
			.member_head{
				display: flex;
				justify-content: space-between;
			}
			.label{
				line-height: 100rpx;
				color: #666;
				font-size: 32rpx;
			}
			.col_y{
				color:#FDB42E;
				font-size: 32rpx;
				line-height: 100rpx;
			}
			.col_666{
				line-height: 100rpx;
				color:#666;
				font-size: 32rpx;
			}
			.member-list{
				display: flex;
				flex-flow: row wrap;
				justify-content: flex-start;
				
				.member-item{
					margin-left: 16rpx;
					width:18%;
					display:flex;
					flex-wrap:wrap;
					justify-content:center;
					margin-bottom:50rpx;
					// padding: 0 10rpx;
					.headimg{
						width: 110rpx;
						height: 110rpx;
						position: relative;
						margin-bottom:15rpx;
						.icon{
							position: absolute;
							width:38rpx;
							height:37rpx;
							right: 0;
							top:0;
							&.m{
								background:url($public-baseImgUrl+'icon_m.png') no-repeat;
								background-size: 100% 100%;
							}
							&.w{
								background:url($public-baseImgUrl+'icon_w.png') no-repeat;
								background-size: 100% 100%;
							}
						}
						
					}
					image{
						width: 110rpx;
						height: 110rpx;
						border-radius: 50%;
						background: url($public-baseImgUrl+'icon_renshu.png') center no-repeat;
						background-size: 100% 100%;
					}
					
					.member-name{
						width:100%;
						text-align: center;
						line-height: 30rpx;
						font-size: 26rpx;
						color: $text-color-grey;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						margin-bottom:10rpx;
					}
					.jibieM{
						font-size: 22rpx;
						color:#2E87FF;
						border:1px solid #C8DBFF;
						padding-right:7rpx;
						border-radius: 5rpx;
						display:flex;
						flex-wrap: nowrap;
						box-sizing: border-box;
						line-height:32rpx;
					}
					.jibieW{
						font-size: 22rpx;
						color:#E14806;
						border:1px solid #FFC8C3;
						padding-right:7rpx;
						border-radius: 5rpx;
						display:flex;
						box-sizing: border-box;
						line-height:32rpx;
					}
					.jbicon{
						margin-left:5rpx;
					}
					&:nth-child(5n+1){
						margin-left: 0;
					}
				}	
			}
			// .member-list:after{
			// 	content: "";
			// 	width: ;
			// }
		}
		.share-btn{
			width: 730rpx;
			height: 88rpx;
			margin: 30rpx auto;
			border-radius: 44rpx;
			background-color: $public-color-blue1;
			color: #FFF;
			line-height: 88rpx;
			text-align: center;
			font-size: 30rpx;
		}
	}
</style>
